import { stringify } from "querystring";

/**
 * 此方法可以创建echarts的甘特图
 * @param {echarts 的实例} e 
 */
export function ganttEcharts(title, e, categories, types,datas,min,format) {

    Date.prototype.format = function (format) {
        var o = {
            "M+": this.getMonth() + 1, //month
            "d+": this.getDate(),    //day
            "h+": this.getHours(),   //hour
            "m+": this.getMinutes(), //minute
            "s+": this.getSeconds(), //second
            "q+": Math.floor((this.getMonth() + 3) / 3),  //quarter
            "S": this.getMilliseconds() //millisecond
        }
        if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
            (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o) if (new RegExp("(" + k + ")").test(format))
            format = format.replace(RegExp.$1,
                RegExp.$1.length == 1 ? o[k] :
                    ("00" + o[k]).substr(("" + o[k]).length));
        return format;
    }

    var data = datas;
    // var dataCount = 10;
    var startTime = +new Date();


    // Generate mock data
    // echarts.util.each(categories, function (category, index) {
    //     var baseTime = startTime;
    //     // console.log('-----' + startTime);
    //     // var d = new Date(startTime).format('yyyy-MM-dd');
    //     // console.log('-----' + d);
    //     for (var i = 0; i < dataCount; i++) {
    //         var typeItem = types[Math.round(Math.random() * (types.length - 1))]; // 开始时间
    //         var duration = Math.round(Math.random() * 10000); //时长
    //         data.push({
    //             name: typeItem.name,
    //             value: [
    //                 index,
    //                 baseTime,
    //                 baseTime += duration,
    //                 duration
    //             ],
    //             itemStyle: {
    //                 normal: {
    //                     color: typeItem.color
    //                 }
    //             }
    //         });
    //         // baseTime += Math.round(Math.random() * 2000);
    //     }
    // });

    return {
        tooltip: {
            formatter: function (params) {
                return params.marker + params.name + ' -> [' + new Date(params.value[1]).format('yyyy-MM-dd hh:mm:ss') + '-' + new Date(params.value[2]).format('yyyy-MM-dd hh:mm:ss' + '] 共:' + params.value[3]+'秒');
            }
        },
        title: {
            text: title,
            left: 'center'
        },
        dataZoom: [{
            type: 'slider',
            filterMode: 'weakFilter',
            showDataShadow: false,
            top: 400,
            height: 10,
            borderColor: 'transparent',
            backgroundColor: '#e2e2e2',
            handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
            handleSize: 20,
            handleStyle: {
                shadowBlur: 6,
                shadowOffsetX: 1,
                shadowOffsetY: 2,
                shadowColor: '#aaa'
            },
            labelFormatter: ''
        }, {
            type: 'inside',
            filterMode: 'weakFilter'
        }],
        grid: {
            height: 300
        },
        xAxis: {
            min: min,
            scale: true,
            axisLabel: {
                formatter: function (val) {
                    // console.log('+++++++' +val+'-----' +Math.max(0, val - startTime));
                    return new Date(Math.max(0, val)).format(format);
                }
            }
        },
        yAxis: {
            data: categories
        },
        series: [{
            type: 'custom',
            renderItem: renderItem,
            itemStyle: {
                normal: {
                    opacity: 0.8
                }
            },
            encode: {
                x: [1, 2],
                y: 0
            },
            data: data
        }]
    };
}
export function ganttEchartsQ(title, e, categories, types,datas,min,format) {

    Date.prototype.format = function (format) {
        var o = {
            "M+": this.getMonth() + 1, //month
            "d+": this.getDate(),    //day
            "h+": this.getHours(),   //hour
            "m+": this.getMinutes(), //minute
            "s+": this.getSeconds(), //second
            "q+": Math.floor((this.getMonth() + 3) / 3),  //quarter
            "S": this.getMilliseconds() //millisecond
        }
        if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
            (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o) if (new RegExp("(" + k + ")").test(format))
            format = format.replace(RegExp.$1,
                RegExp.$1.length == 1 ? o[k] :
                    ("00" + o[k]).substr(("" + o[k]).length));
        return format;
    }

    var data = datas;
    // var dataCount = 10;
    var startTime = +new Date();


    // Generate mock data
    // echarts.util.each(categories, function (category, index) {
    //     var baseTime = startTime;
    //     // console.log('-----' + startTime);
    //     // var d = new Date(startTime).format('yyyy-MM-dd');
    //     // console.log('-----' + d);
    //     for (var i = 0; i < dataCount; i++) {
    //         var typeItem = types[Math.round(Math.random() * (types.length - 1))]; // 开始时间
    //         var duration = Math.round(Math.random() * 10000); //时长
    //         data.push({
    //             name: typeItem.name,
    //             value: [
    //                 index,
    //                 baseTime,
    //                 baseTime += duration,
    //                 duration
    //             ],
    //             itemStyle: {
    //                 normal: {
    //                     color: typeItem.color
    //                 }
    //             }
    //         });
    //         // baseTime += Math.round(Math.random() * 2000);
    //     }
    // });

    return {
        tooltip: {
            formatter: function (params) {
                return params.marker + params.name + ' -> [' + new Date(params.value[1]).format('yyyy-MM-dd hh:mm') + '-' + new Date(params.value[2]).format('yyyy-MM-dd hh:mm' + '] 共:' + params.value[3]+'分钟；工作内容：'+params.value[4] );
            }
        },
        title: {
            text: title,
            left: 'center'
        },
        dataZoom: [{
            type: 'slider',
            filterMode: 'weakFilter',
            showDataShadow: false,
            top: 400,
            height: 10,
            borderColor: 'transparent',
            backgroundColor: '#e2e2e2',
            handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
            handleSize: 20,
            handleStyle: {
                shadowBlur: 6,
                shadowOffsetX: 1,
                shadowOffsetY: 2,
                shadowColor: '#aaa'
            },
            labelFormatter: ''
        }, {
            type: 'inside',
            filterMode: 'weakFilter'
        }],
        grid: {
            height: 300
        },
        xAxis: {
            min: min,
            scale: true,
            axisLabel: {
                formatter: function (val) {
                    // console.log('+++++++' +val+'-----' +Math.max(0, val - startTime));
                    return new Date(Math.max(0, val)).format(format);
                }
            }
        },
        yAxis: {
            data: categories
        },
        series: [{
            type: 'custom',
            renderItem: renderItem,
            itemStyle: {
                normal: {
                    opacity: 0.8
                }
            },
            encode: {
                x: [1, 2],
                y: 0
            },
            data: data
        }]
    };
}

function renderItem(params, api) {
    var categoryIndex = api.value(0);
    var start = api.coord([api.value(1), categoryIndex]);
    var end = api.coord([api.value(2), categoryIndex]);
    var height = api.size([0, 1])[1] * 0.6;

    return {
        type: 'rect',
        shape: echarts.graphic.clipRectByRect({
            x: start[0],
            y: start[1] - height / 2,
            width: end[0] - start[0],
            height: height
        }, {
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
            }),
        style: api.style()
    };
}



